import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,
    Image,
} from 'antd';

import request, { baseUrl } from '@/utils/request'

const Edit = () => {
    const navigate = useNavigate()
    // 获取动态路由id
    const { id } = useParams();

    // 创建表单实例
    const [myform] = Form.useForm()

    const [user,setUser] = useState({});

    // 获取单个用户详情
    const getUser = async()=> {
        const {data} = await request.get('/user/'+id,{params:{uid:id}});

        setUser(data.data);
        myform.setFieldsValue(data.data);
    }

    useEffect(()=>{
        getUser()
    },[])

    // 提交修改用户信息
    const submit = async ({ uid, ...values }) => {
        console.log('values', values)

        const newVal = { ...values, uid: id }

        const { data } = await request.post('/user/updateUsers', newVal)
        if (data.code === 200) {
            message.success('用户修改成功')
            navigate('/manage/user/list')
        }
    }

    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={user}
                onFinish={submit}

                form={myform}
            >
                <Form.Item name="uid" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="用户名" name="username">
                    <Input disabled/>
                </Form.Item>
                <Form.Item label="用户密码" name='password'>
                    <Input disabled/>
                </Form.Item>
                <Form.Item label="手机号码" name='telphone'>
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
            </Form>

        </div>
    )
}


export default Edit;